$(function() {
	var projectId = "";
	var building = "";
	var door = "";
	var data = {
		"xScale" : "ordinal",
		"yScale" : "linear",
		"type" : "bar",
		"main" : [ {
			className : ".stats",
			"data" : []
		} ]
	};

	// The tooltip shown over the chart
	var tt = $('<div class="ex-tooltip">').appendTo('body'), topOffset = -32;

	var opts = {
		paddingLeft : 50,
		paddingTop : 20,
		paddingRight : 10,
		axisPaddingLeft : 25,
		tickHintX : 9, // How many ticks to show horizontally

		tickFormatX : function(x) {

			// Provide formatting for the x-axis tick labels.
			// This uses sugar's format method of the date object.

			return x;
		},

		"mouseover" : function(d, i) {
			var pos = $(this).offset();

			tt.text(d.x + ': ' + d.y).css({

				top : topOffset + pos.top,
				left : pos.left

			}).show();
		},

		"mouseout" : function(x) {
			tt.hide();
		}
	};

	var optTemperature = {
		paddingLeft : 50,
		paddingTop : 20,
		paddingRight : 10,
		axisPaddingLeft : 25,
		tickHintX : 9, // How many ticks to show horizontally

		tickFormatX : function(x) {

			// Provide formatting for the x-axis tick labels.
			// This uses sugar's format method of the date object.

			return x;
		},

		"mouseover" : function(d, i) {
			var pos = $(this).offset();
			var a = $(this).parent();
			var c = a.attr('class');
			var css = c.split(" ")[2];
			var className = "";
			if (css == 'real') {
				className = "实际温度";
			} else if (css == 'user') {
				className = "设置温度";
			} else {
				className = "平均温度";
			}

			tt.text(d.x + '的' + className + ': ' + d.y).css({

				top : topOffset + pos.top,
				left : pos.left

			}).show();
		},

		"mouseout" : function(x) {
			tt.hide();
		}
	};

	var heatChart = new xChart('bar', data, '#heatChart', opts);
	var areaChart = new xChart('bar', data, '#areaChart', opts);
	var periodChart = new xChart('bar', data, '#periodChart', opts);
	var temperatureChart = new xChart('bar', data, '#temperatureChart',
			optTemperature);

	$("#tree")
			.dynatree(
					{
						selectMode : 1,
						onClick : function(node) {
							if (!node.data.isFolder) {
								// alert("You activated " + node.data.title);
								$("#projectName")
										.val(
												node.getParent().getParent()
														.getParent().data.title
														+ node.getParent()
																.getParent().data.title
														+ node.getParent().data.title
														+ node.data.title);
								projectId = node.data.key;
								// ajaxLoadChart(building, door, node.data.key);
								$("#tree").hide();
								loadBuilding(node.data.key);
								$('#building').prop('disabled', false);
								$('#building').selectpicker('refresh');
								$("#door").html(
										"<option>请选择门号/显示该楼数据报表</option>");
								$('#door').prop('disabled', true);
								$('#door').selectpicker('refresh');
								$('#all').hide();
							}
						},
						initAjax : {
							url : window.basePath + "project/loadProject"
						}
					});

	$("#projectName").click(function(event) {
		$("#tree").toggle();
		$(document).one("click", function() {// 对document绑定一个影藏Div方法
			$("#tree").hide();
		});
		event.stopPropagation();// 点击Button阻止事件冒泡到document
	});
	$("#tree").click(function(event) {
		event.stopPropagation();// 在Div区域内的点击事件阻止冒泡到document
	});
	$("#building").selectpicker({
		style : 'btn',
		size : 8,
		showContent : false
	});
	$("#door").selectpicker({
		style : 'btn',
		size : 8,
		showContent : false
	});

	$("#building").on('change', function() {
		if ($(this).get(0).selectedIndex != 0) {
			loadDoor(projectId, $(this).val());
			$('#door').prop('disabled', false);
			$('#door').selectpicker('refresh');
			loadChart(projectId, $(this).val());
			$("#all").show();
		} else {
			$("#door").html("<option>请选择门号/显示该楼数据报表</option>");
			$('#door').prop('disabled', true);
			$('#door').selectpicker('refresh');
			$("#all").hide();
		}
	});

	function loadBuilding(projectId) {
		$("#building").html("<option>请选择楼号</option>");
		$.ajax({
			url : window.basePath + "target/loadBuilding",
			data : {
				projectId : projectId
			},
			type : 'POST',
			success : function(data) {
				for (var i = 0; i < data.length; i++) {
					var text = "<option>" + data[i] + "</option>";
					$("#building").append(text);
				}
				$("#building").selectpicker('refresh');

			}
		});
	}

	$("#door").on('change', function() {
		if ($(this).get(0).selectedIndex != 0) {
			loadDchart($("#building").val(), $(this).val(), projectId);
		} else {
			loadChart(projectId, $("#building").val());
		}
	});
	function loadDoor(projectId, building) {
		$("#door").html("<option>请选择门号/显示该楼数据报表</option>");
		$.ajax({
			url : window.basePath + "target/loadDoor",
			data : {
				projectId : projectId,
				building : building
			},
			type : 'POST',
			success : function(data) {
				for (var i = 0; i < data.length; i++) {
					var text = "<option>" + data[i] + "</option>";
					$("#door").append(text);
				}
				$("#door").selectpicker('refresh');

			}
		});
	}

	function loadChart(projectId, building) {
		$("#temperature").hide();
		// Otherwise, issue an AJAX request
		$.ajax({
			url : window.basePath + "data/heatArea",
			data : {
				building : building,
				projectId : projectId
			},
			type : 'POST',
			success : function(data) {
				if (data.length > 0) {
					$("#heatContent").show();
					$("#heatError").hide();
					var set = [];
					$.each(data, function() {
						set.push({
							x : this.label,
							y : parseInt(this.value, 10)
						});
					});

					heatChart.setData({
						"xScale" : "ordinal",
						"yScale" : "linear",
						"type" : "bar",
						"main" : [ {
							className : ".stats",
							data : set
						} ]
					});
				} else {
					$("#heatContent").hide();
					$("#heatError").show();
				}
			}
		});
		$.ajax({
			url : window.basePath + "data/areaArea",
			data : {
				building : building,
				door : door,
				projectId : projectId
			},
			type : 'POST',
			success : function(data) {
				if (data.length > 0) {
					$("#areaContent").show();
					$("#areaError").hide();
					var set = [];
					$.each(data, function() {
						set.push({
							x : this.label,
							y : parseInt(this.value, 10)
						});
					});

					areaChart.setData({
						"xScale" : "ordinal",
						"yScale" : "linear",
						"type" : "bar",
						"main" : [ {
							className : ".stats",
							data : set
						} ]
					});
				} else {
					$("#areaContent").hide();
					$("#areaError").show();
				}
			}
		});
		$.ajax({
			url : window.basePath + "data/periodArea",
			data : {
				building : building,
				door : door,
				projectId : projectId
			},
			type : 'POST',
			success : function(data) {
				if (data.length > 0) {
					$("#periodContent").show();
					$("#periodError").hide();
					var set = [];
					$.each(data, function() {
						set.push({
							x : this.label,
							y : parseInt(this.value, 10)
						});
					});

					periodChart.setData({
						"xScale" : "ordinal",
						"yScale" : "linear",
						"type" : "bar",
						"main" : [ {
							className : ".stats",
							data : set
						} ],
					});
				} else {
					$("#periodContent").hide();
					$("#periodError").show();
				}
			}
		});
	}

	function loadDchart(building, door, projectId) {
		$("#temperature").show();
		// Otherwise, issue an AJAX request
		$.ajax({
			url : window.basePath + "data/heatDArea",
			data : {
				building : building,
				door : door,
				projectId : projectId
			},
			type : 'POST',
			success : function(data) {
				if (data.length > 0) {
					$("#heatContent").show();
					$("#heatError").hide();
					var set = [];
					$.each(data, function() {
						set.push({
							x : this.label,
							y : parseInt(this.value, 10)
						});
					});

					heatChart.setData({
						"xScale" : "ordinal",
						"yScale" : "linear",
						"type" : "bar",
						"main" : [ {
							className : ".stats",
							data : set
						} ]
					});
				} else {
					$("#heatContent").hide();
					$("#heatError").show();
				}
			}
		});
		$.ajax({
			url : window.basePath + "data/areaDArea",
			data : {
				building : building,
				door : door,
				projectId : projectId
			},
			type : 'POST',
			success : function(data) {
				if (data.length > 0) {
					$("#areaContent").show();
					$("#areaError").hide();
					var set = [];
					$.each(data, function() {
						set.push({
							x : this.label,
							y : parseInt(this.value, 10)
						});
					});

					areaChart.setData({
						"xScale" : "ordinal",
						"yScale" : "linear",
						"type" : "bar",
						"main" : [ {
							className : ".stats",
							data : set
						} ]
					});
				} else {
					$("#areaContent").hide();
					$("#areaError").show();
				}
			}
		});
		$.ajax({
			url : window.basePath + "data/periodDArea",
			data : {
				building : building,
				door : door,
				projectId : projectId
			},
			type : 'POST',
			success : function(data) {
				if (data.length > 0) {
					$("#periodContent").show();
					$("#periodError").hide();
					var set = [];
					$.each(data, function() {
						set.push({
							x : this.label,
							y : parseInt(this.value, 10)
						});
					});

					periodChart.setData({
						"xScale" : "ordinal",
						"yScale" : "linear",
						"type" : "bar",
						"main" : [ {
							className : ".stats",
							data : set
						} ],
					});
				} else {
					$("#periodContent").hide();
					$("#periodError").show();
				}
			}
		});
		$.ajax({
			url : window.basePath + "data/temperatureDArea",
			data : {
				building : building,
				door : door,
				projectId : projectId
			},
			type : 'POST',
			success : function(data) {
				if (data.length > 0 && data[0].length > 0) {
					$("#temperatureContent").show();
					$("#temperatureError").hide();
					var setReal = [];
					var setAvg = [];
					var setUser = [];
					$.each(data[0], function() {
						setReal.push({
							x : this.label,
							y : parseInt(this.value, 10)
						});
					});
					$.each(data[1], function() {
						setAvg.push({
							x : this.label,
							y : parseInt(this.value, 10)
						});
					});
					$.each(data[2], function() {
						setUser.push({
							x : this.label,
							y : parseInt(this.value, 10)
						});
					});

					temperatureChart.setData({
						"xScale" : "ordinal",
						"yScale" : "linear",
						"type" : "bar",
						"main" : [ {
							className : ".real",
							data : setReal
						}, {
							className : ".avg",
							data : setAvg
						}, {
							className : ".user",
							data : setUser
						} ]
					});
				} else {
					$("#temperatureContent").hide();
					$("#temperatureError").show();
				}
			}
		});

	}
});